<template>
  <div class="server-container" v-loading="spinning">
    <div class="header-box-container">
      <RInfoCard title="服务器信息">
        <ADescriptions class="info-item-description" :column="headerColumn" size="small">
          <ADescriptionsItem v-for="item in systemInfo" :key="item.key" :label="item.label" :span="item?.span">
            {{ sourceData?.system?.[item.key] }}
          </ADescriptionsItem>
        </ADescriptions>
      </RInfoCard>
      <RInfoCard title="Java 虚拟机信息">
        <ADescriptions class="info-item-description" :column="headerColumn" size="small">
          <ADescriptionsItem v-for="item in jvmBaseInfo" :key="item.key" :label="item.label" :span="item?.span">
            {{ sourceData?.jvm?.[item.key] }}
          </ADescriptionsItem>
        </ADescriptions>
      </RInfoCard>
    </div>

    <div class="body-box-container">
      <RInfoCard title="CPU">
        <div class="info-item-content">
          <GaugeChart
            class="info-item-chart"
            :data="[{ name: '总使用率', value: sourceData?.cpu?.usage || 0 }]"
          ></GaugeChart>
          <ADescriptions class="info-item-description" :column="bodyColumn" size="small">
            <ADescriptionsItem v-for="item in cpuInfo" :key="item.key" :label="item.label" :span="item?.span">
              {{ `${sourceData?.cpu?.[item.key] || 0} %` }}
            </ADescriptionsItem>
          </ADescriptions>
        </div>
      </RInfoCard>

      <RInfoCard title="内存">
        <div class="info-item-content">
          <GaugeChart
            class="info-item-chart"
            :data="[{ name: '使用率', value: sourceData?.memory?.usage || 0 }]"
          ></GaugeChart>
          <ADescriptions class="info-item-description" :column="bodyColumn" size="small">
            <ADescriptionsItem v-for="item in memoryInfo" :key="item.key" :label="item.label" :span="item?.span">
              {{ `${sourceData?.memory?.[item.key] || 0} GB` }}
            </ADescriptionsItem>
          </ADescriptions>
        </div>
      </RInfoCard>

      <RInfoCard title="JVM">
        <div class="info-item-content">
          <GaugeChart
            class="info-item-chart"
            :data="[{ name: '使用率', value: sourceData?.jvm?.usage || 0 }]"
          ></GaugeChart>
          <ADescriptions class="info-item-description" :column="bodyColumn" size="small">
            <ADescriptionsItem v-for="item in jvmInfo" :key="item.key" :label="item.label" :span="item?.span">
              {{ `${sourceData?.jvm?.[item.key] || 0} MB` }}
            </ADescriptionsItem>
          </ADescriptions>
        </div>
      </RInfoCard>

      <RInfoCard v-for="disk in sourceData?.disks" :key="disk?.typeName" :title="disk?.typeName">
        <div class="info-item-content">
          <GaugeChart class="info-item-chart" :data="[{ name: '使用率', value: disk?.usage || 0 }]"></GaugeChart>
          <ADescriptions class="info-item-description" :column="bodyColumn" size="small">
            <ADescriptionsItem v-for="item in diskInfo" :key="item.key" :label="item.label" :span="item?.span">
              {{ disk?.[item.key] }}
            </ADescriptionsItem>
          </ADescriptions>
        </div>
      </RInfoCard>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { GaugeChart } from './modules';
import { useFetchData } from '@/hooks/index.js';
import { fetchGetServerInfo } from '@/api/monitor/server.js';
import { RInfoCard } from '@/components/custom/index.js';

const { sourceData, spinning, onFetchData } = useFetchData(fetchGetServerInfo);

const headerColumn = { xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 };
const bodyColumn = 2;

const systemInfo = [
  { label: '服务器名称', key: 'computerName' },
  { label: '服务器IP', key: 'computerIp' },
  { label: '操作系统', key: 'osName' },
  { label: '系统架构', key: 'osArch' }
];

const jvmBaseInfo = [
  { label: 'Java 名称', key: 'name' },
  { label: 'Java 版本', key: 'version' },
  { label: '启动时间', key: 'startTime' },
  { label: '运行时长', key: 'runTime' },
  { label: '运行参数', key: 'inputArgs' }
];

const cpuInfo = [
  { label: '系统使用率', key: 'system' },
  { label: '用户使用率', key: 'used' },
  { label: '当前等待率', key: 'wait' },
  { label: '当前空闲率', key: 'free' }
];

const memoryInfo = [
  { label: '总内存', key: 'total', span: bodyColumn },
  { label: '已用内存', key: 'used' },
  { label: '剩余内存', key: 'free' }
];

const jvmInfo = [
  { label: '总内存', key: 'total', span: bodyColumn },
  { label: '已用内存', key: 'used' },
  { label: '剩余内存', key: 'free' }
];

const diskInfo = [
  { label: '总大小', key: 'total', span: bodyColumn },
  { label: '可用大小', key: 'free' },
  { label: '已用大小', key: 'used' }
];

onMounted(() => {
  onFetchData();
});
</script>

<style lang="scss" scoped>
.server-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;

  .header-box-container {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;

    .info-item-description {
      width: 100%;
      height: 100%;
      padding: 16px;
    }
  }

  .body-box-container {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;

    .info-item-content {
      width: 100%;
      height: 100%;
      padding: 8px;
      display: flex;
      flex-direction: column;

      .info-item-chart {
        width: 100%;
      }

      .info-item-description {
        margin-top: auto;
        padding: 0 8px;
      }
    }
  }
}
</style>
